<template>
  <div>
    <CodeCard v-bind="btnDesc">
      <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <sdn-pagination layout="prev, pager, next" :total="50"></sdn-pagination>
      </div>
      <div class="block">
        <span class="demonstration">大于 7 页时的效果</span>
        <sdn-pagination layout="prev, pager, next" :total="1000"></sdn-pagination>
      </div>
      <template #annotation></template>
    </CodeCard>
  </div>
</template>

<script>


export default {
  components: {
    
  },

  setup() {
    const btnDesc = {
      title: "Pagination 分页",
      describe: "当数据量过多时，使用分页分解数据",
      codeBlock: ` <div class="block">
        <span class="demonstration">页数较少时的效果</span>
        <sdn-pagination layout="prev, pager, next" :total="50"></sdn-pagination>
      </div>
      <div class="block">
        <span class="demonstration">大于 7 页时的效果</span>
        <sdn-pagination layout="prev, pager, next" :total="1000"></sdn-pagination>
      </div>`,
      attrs: [
        {
          "name": "small",
          "describe": "是否使用小型分页样式",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "background",
          "describe": "是否为分页按钮添加背景色",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {
          "name": "page-size",
          "describe": "每页显示条目个数，支持 .sync 修饰符",
          "type": "number",
          "emun": "—",
          "default": "10"
        }, {"name": "total", "describe": "总条目数", "type": "number", "emun": "—", "default": "—"}, {
          "name": "page-count",
          "describe": "总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性",
          "type": "Number",
          "emun": "—",
          "default": "—"
        }, {
          "name": "pager-count",
          "describe": "页码按钮的数量，当总页数超过该值时会折叠",
          "type": "number",
          "emun": "大于等于 5 且小于等于 21 的奇数",
          "default": "7"
        }, {
          "name": "current-page",
          "describe": "当前页数，支持 .sync 修饰符",
          "type": "number",
          "emun": "—",
          "default": "1"
        }, {
          "name": "layout",
          "describe": "组件布局，子组件名用逗号分隔",
          "type": "String",
          "emun": "sizes, prev, pager, next, jumper, ->, total, slot",
          "default": "'prev, pager, next, jumper, ->, total'"
        }, {
          "name": "page-sizes",
          "describe": "每页显示个数选择器的选项设置",
          "type": "number[]",
          "emun": "—",
          "default": "[10, 20, 30, 40, 50, 100]"
        }, {
          "name": "popper-class",
          "describe": "每页显示个数选择器的下拉框类名",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "prev-text",
          "describe": "替代图标显示的上一页文字",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "next-text",
          "describe": "替代图标显示的下一页文字",
          "type": "string",
          "emun": "—",
          "default": "—"
        }, {
          "name": "disabled",
          "describe": "是否禁用",
          "type": "boolean",
          "emun": "—",
          "default": "FALSE"
        }, {"name": "hide-on-single-page", "describe": "只有一页时是否隐藏", "type": "boolean", "emun": "—", "default": "-"}],
      slots: [{"name": "—", "describe": "自定义内容，需要在 layout 中列出 slot"}],
      events: [{"name": "size-change", "describe": "pageSize 改变时会触发", "params": "每页条数"}, {
        "name": "current-change",
        "describe": "currentPage 改变时会触发",
        "params": "当前页"
      }, {"name": "prev-click", "describe": "用户点击上一页按钮改变当前页后触发", "params": "当前页"}, {
        "name": "next-click",
        "describe": "用户点击下一页按钮改变当前页后触发",
        "params": "当前页"
      }]
    };
    return {
      btnDesc,
    };
  },
};
</script>

<style scoped>
.demo {
  margin-bottom: 0.1rem;
  max-width: 50%;
}
</style>
